<template>
  <view v-if="shenheStatus == 0" class="page">
    <view class="item" v-for="(item, index) in orderList" :key="index">
      <view class="item-tx">
        <image :src="item.user_info.avatar" mode="aspectFill"></image>
      </view>
      <view class="item-con">
        <view class="flex">
          <view class="name">{{ item.user_info.name }}</view>
          <view class="price">¥{{ item.pay_price }}</view>
        </view>
        <view class="flex">
          <view class="des">账户充值</view>
          <view class="amount">佣金(¥{{ item.amount }})</view>
        </view>
        <view class="flex">
          <view class="des">{{ item.date }}</view>
        </view>
      </view>
    </view>
    <toolsMore :status="moreStatus"></toolsMore>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from "@/components/shenhe/shenhe";
import toolsMore from "@/components/tools/tools-more.vue";

export default {
  components: {
    Shenhe,
    toolsMore
  },
  data() {
    return {
      orderList: [],
      page: 1,
      noMore: false,
      moreStatus: 1
    };
  },
  onLoad() {
    this.getList();
  },
  methods: {
    async getList() {
      let params = {
        page: this.page
      };
      this.moreStatus = 2;

      try {
        const res = await this.$allrequest.share.getRechargeOrder(params, true);
        this.moreStatus = 1;
        if (res.code == 0) {
          this.orderList = [...this.orderList, ...res.data.list];
          if (this.orderList.length >= res.data.row_count) {
            this.noMore = true;
            this.moreStatus = 3;
          } else {
            this.noMore = false;
          }
        }
      } catch (error) {
        this.moreStatus = 1;
      }
    }
  },
  onReachBottom() {
    if (!this.noMore) {
      this.page++;
      this.getList();
    }
  }
};
</script>

<style scoped lang="scss">
.page {
  min-height: 100vh;
  padding-top: 24rpx;
  background-color: #f2f2f2;
}

.item {
  display: flex;
  background: #fff;
  padding-top: 24rpx;
}

.item-tx {
  padding: 0 24rpx;

  image {
    width: 70rpx;
    height: 70rpx;
    border-radius: 32px;
  }
}

.item-con {
  flex: 1;
  border-bottom: 1px solid #f8f8f8;
  padding: 0 24rpx 24rpx 0;
}

.flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10rpx 0;
}

.name {
  font-size: 28rpx;
  color: #262626;
}

.price {
  font-size: 36rpx;
  font-weight: bold;
  color: #262626;
}

.des {
  flex: 1;
  overflow: hidden;
  padding-right: 15rpx;
  font-size: 24rpx;
  color: #8c8c8c;
}

.amount {
  font-size: 26rpx;
  color: #f0250e;
}
</style>
